<template>

  <div>
    <van-popup v-model="show" position="bottom">
      <van-picker show-toolbar :columns="data.jdOptionList" @confirm="confirmOption" @cancel="show = false" />
    </van-popup>

    <!--  <div class="mymain">-->

    <!--    <div class="order-record-wrap">-->
    <!--      <div v-if="appointment" style="overflow:hidden;width:100%; ">-->
    <!--        <div class="outer" >-->
    <!--          <div class="timeline">-->
    <!--            <div class="container left" v-for="(item, i) in data.jykfList" :key="i">-->
    <!--              <div class="content" :class="setClass(item)">-->
    <!--                <el-button size="small" type="primary" @click="selectOption(item)" v-if="item.clickable">{{item.name}}</el-button>-->
    <!--                <span style="color: white"  v-else >{{item.name}}</span>-->
    <!--              </div>-->

    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->

    <div style="padding-left: 30px">
      <van-steps center="true" direction="vertical" :active="data.curPos">
        <van-step v-for="(item, i) in data.jykfList" :key="i">
          <!-- 第一个没点  显示灰色-->
          <span @click="selectOption(item)" v-if="item.clickable && data.curPos == '0'" style="color:#969799">{{ item.name }}</span>
          <span @click="selectOption(item)" v-else-if="item.clickable">{{ item.name }}</span>
          <span style="color: red" v-else-if="item.color === 'red'">
            {{ item.name }}
          </span>
          <span v-else>{{ item.name }}</span>
        </van-step>
      </van-steps>
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import qs from 'qs'
import { Tabbar, TabbarItem, Popup, Cell, CellGroup, Toast, Icon, Step, Steps } from 'vant'
Vue.use(Tabbar).use(TabbarItem).use(Popup).use(Cell).use(CellGroup).use(Toast).use(Icon).use(Step).use(Steps)

export default {
  props: {
    data: {
    }
  },
  mounted () {
    //console.log('jykfmap mounted...')
  },
  data () {
    return {
      show: false,
      boshow: false,
      fullToggle: false,
      appointment: true,
      height: 20,
      checkedDate: new Date(),
      bos: {},
      propValue: {},
      name: '',
      actived: 0
    }
  },
  created () {

  },
  methods: {

    selectOption (item) {
      this.show = true
      this.name = item.name
    },
    confirmOption (value) {
      this.show = false
      let obj = this.propValue.obj
      // alert(value)
      // alert(JSON.stringify(this.propValue.enumMap))
      let data = { [obj + '_id']: this.propValue.id, jyjd: this.name, [obj + '_jdzt']: value }
      this.axios({
        method: 'post',
        url: '/api/jykf.jyjdselectsave.do',
        data: qs.stringify(data)
      }).then(res => {
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          this.$emit('refresh')
        }
      })
    }

  },
  watch: {
    data: function (newval, oldval) {
      this.propValue = newval
    }

  }
}
</script>

<style lang="less" scoped></style>
